<template>
	<view class="columnbox wdh-100 content">
		<view class="wdh-100 notice">*每月1-5号可以提现，每月可提现一次</view>
		<view class="w-box def-bgcol columnbox color-box">
			<view class="money-num">{{info.xinchou}}<text>元</text> </view>
			<view class="w-title">可提现薪酬</view>
			<view class="rowbox tx-box" @click="showAccount">提现账户</view>
			<view class="rowbox send-btn tx-btn" @click="toWithdraw">立即提现</view>
			<!-- 	<view class="wdh-100 detail-title" style="margin-top: 20rpx;">
				注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项
			</view> -->
		</view>
		<view class="wdh-100 detail-title">提现记录</view>
		<view class="columnbox one-info" v-for="(item,index) in recordList" :key='index'>
			<view class="rowbox wdh-100 spb status_box">
				<view>{{getDate(item.addtime)}}</view>
				<view style="color: #33c722;" v-if="item.state==1">申请中</view>
				<view v-else-if="item.state==2">已完成</view>
				<view style="color: #d1494b;" v-else-if="item.state==3">提现失败</view>
			</view>
			<view class="rowbox wdh-100 spb">
				<view v-if="item.Bank.state==1">提现至银行卡</view>
				<view v-else>提现至支付宝</view>
				<!-- <view>{{getDate(item.addtime)}}</view> -->
			</view>
			<view class="rowbox wdh-100 spb" style="margin-top: 20rpx;">
				<view v-if="item.Bank.state==1">卡号：{{item.Bank.bank}}</view>
				<view v-else>账户：{{item.Bank.alipay}}</view>
				<view style="color: #000;">金额：¥ {{item.price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import toDate from '@/utils/time.js'
	export default {
		data() {
			return {
				info: '',
				pageNo: 1,
				recordList: [],
				total: 0
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			isLogin() {
				return this.$store.state.isLogin
			}
		},
		onLoad() {
			this.getInfo()
			this.getRecord()
		},
		methods: {
			getDate(v) {
				return toDate.toLocalDate(v)
			},
			getRecord() {
				this.$req.post('/doctor/tixians', {
					pageNo: this.pageNo,
					pageSize: 20,
					doctorid: uni.getStorageSync('uid')
				}).then(res => {
					this.recordList = res.data.data.data
					this.total = res.data.data.totalCount
				})
			},
			getInfo() {
				this.$req.post('/doctor/doctorinfo', {
					doctorid: uni.getStorageSync('uid')
				}).then(res => {
					this.info = res.data.data
				})
			},
			toWithdraw() {
				uni.navigateTo({
					url: '/pages/wallet/toWithdraw'
				})
			},
			showAccount() {
				uni.navigateTo({
					url: '/pages/wallet/withdrawAccount'
				})
			},
			showNowSalary() {
				uni.navigateTo({
					url: '/pages/wallet/nowSalary'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #F5F8FB;
		justify-content: flex-start;
	}

	.color-box {
		width: 710rpx;
		padding: 40rpx 20rpx;
		border-radius: 20rpx;
		margin: 20rpx 0;
		position: relative;
		background: #fff;

		.tx-box {
			position: absolute;
			right: 0;
			top: 40rpx;
			background: rgba(#00b6b2, .1);
			font-size: 24rpx;
			padding: 10rpx 20rpx;
			border-radius: 100rpx 0 0 100rpx;
			padding-right: 0;
			color: #000;
		}

		.d-box {
			font-size: 24rpx;
			background: rgba(#fff, .9);
			padding: 10rpx 20rpx;
			border-radius: 100rpx;
			transform: scale(.9);
		}

		.money-num {
			margin-top: 20rpx;
			color: #000;
			font-size: 50rpx;
			font-weight: bold;

			text {
				font-weight: normal;
				font-size: 28rpx;
				margin-left: 10rpx;
			}
		}

		.w-title {
			color: #000;
			font-size: 24rpx;
			margin-top: 20rpx;
		}
	}

	.one-info {
		background: #fff;
		padding: 26rpx 40rpx;
		font-size: 28rpx;
		color: #656767;
		border-bottom: #F5F8FB solid 1px;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
	}

	.detail-title {
		color: #adadad;
		font-size: 24rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
	}

	.tx-btn {
		width: 600rpx;
		margin-top: 40rpx;
	}

	.one-info {
		width: 710rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.status_box {
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: #eeeeee solid 1px;
		font-size: 24rpx;
	}

	.notice {
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #f17b0b;
	}
</style>